<template>
  <div class="perInfo">
    <!-- closable:删除按钮 -->
    <el-tag
      :key="index"
      v-for="(jobTitle, index) in jobTitleLists"
      closable
      :disable-transitions="false"
      @close="jobClose(jobTitle)"
    >
      <p
        @dblclick="dblclickJobInput(index)"
        v-if="jobInput === index ? false : true"
      >
        {{ jobTitle.name }}
      </p>
      <el-input
        v-else
        v-model="jobTitle.name"
        @keyup.enter.native="handleJobInput(jobTitle.name)"
        @blur="handleJobInput(jobTitle.name)"
        ref="dbJobInput"
        clearable
      >
      </el-input>
      <p class="tag-icon">
        <el-upload
          ref="upload"
          list-type="picture"
          accept=".jpg,.png"
          :action="'#'"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="getFile"
          :before-remove="() => false"
          @click.native="getFileId(jobTitle)"
        >
          <img :src="jobTitle.icon" alt="" />
        </el-upload>
      </p>
    </el-tag>
    <ComAddButton1
      label="添加一个职称"
      @Event-blurInput="handleJobConfirm"
    ></ComAddButton1>
  </div>
</template>

<script>
import ComAddButton1 from "./ComAddButton1.vue";
export default {
  name: "JopTitle",
  components: { ComAddButton1 },
  props: [
    "expertTypeList",
    "expertJobTitleList",
    "jobTitleList",
    "jobTitlePid",
    "current",
    "dynamicTags",
    "jobTitleSelect",
  ],
  data() {
    return {
      //双击专家职称tag显示输入框
      jobInput: "",
      //默认选中第一个显示的专家职称
      jobTitleLists: [],
      //数据更新之后的专家职称列表
      newJobList: [],
      //判断添加职称是否显示
      jobVisible: false,
      jobTitleValue: "",
    };
  },
  mounted() {
    this.jobDefault(); //默认选中第一个专家类型显示对应的专家职称
  },
  methods: {
      getFile(jobTitle){
        this.$emit('change', jobTitle);
      },
      getFileId(jobTitle){
        this.$emit('getFileId', jobTitle);
      },
    //左侧专家类型默认选中第一个显示的专家职称
    jobDefault() {
      setTimeout(() => {
        let typeId = this.expertTypeList[0].id;
        let expertJobList = this.expertJobTitleList;
        let jobT = expertJobList.filter((item) => item.pid === typeId);
        this.jobTitleLists = jobT;
         

      }, 500);
    },
    //专家职称 双击显示输入框
    dblclickJobInput(index) {
      console.log(index);
      setTimeout(() => {
        this.$refs.dbJobInput[0].focus();
      }, 50);
      this.jobInput = index;
    },


    //专家职称 失去焦点变为空
    handleJobInput(typeName) {
      console.log(typeName);
      if (!typeName) {
        this.$message.error("输入值不能为空！");
        return;
      }
      this.jobInput = "";
    },

    //中间专家职称 删除某个职称
    jobClose(tag) {
      this.$confirm("此操作将永久删除所选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.jobTitles.splice(this.jobTitles.indexOf(tag), 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //中间专家职称 添加按钮和编辑的显示隐藏
    showJobInput() {
      this.jobVisible = true;
      this.$nextTick((_) => {
        this.$refs.jobTitleInput.$refs.input.focus();
      });
    },
    //添加后根据专家类型的id筛选专家职称的pid
    handleJobList(pid) {
      // this.current.currentIndex = index
      //根据专家类型的id筛选专家职称的pid
      setTimeout(() => {
        let jobT = this.newJobList.filter((item) => item.pid === pid);
        console.log(jobT);
        this.jobTitleLists = jobT;
      }, 50);
    },
    //中间专家职称 input确认之后执行的函数
    handleJobConfirm(val) {
      let addJobTitle = val;
      addJobTitle.type = "2";
      addJobTitle.pid = this.jobTitlePid.id || this.expertTypeList[0].id;
      // console.log(addJobTitle);
      this.$emit("AddExpertOffice", addJobTitle);
      // await this.$emit('getExpertTypeList')
      // this.handleJobList(addJobTitle.pid)
      this.$emit("handleClick", this.jobTitleSelect, this.current.currentIndex);
      this.jobVisible = false;
    },
  },
  watch: {
    jobTitleList: {
      handler(newValue, oldValue) {
        this.jobTitleLists = newValue;
        // console.log(this.jobTitleLists);
      },
    },
    //监控专家职称列表的变化赋值给newJobList
    expertJobTitleList: {
      handler(newValue, oldValue) {
        console.log(newValue);
        this.newJobList = newValue;
      },
    },
  },
};
</script>

<style scoped>
.el-tag {
  position: relative;
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px;
  width: 47%;
  margin-right: 3%;
  margin-bottom: 15px;
  color: #333;
}
.el-tag > p {
  margin: 0;
  display: inline-block;
}
.el-tag > .tag-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 5px;
  margin: 0;
}
.el-tag > .tag-icon img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.3s;
}
.el-tag > .tag-icon:hover img {
  transform: scale(1.8);
}
.el-tag .el-input {
  width: 80px;
}
.el-tag .el-input >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding-left: 8px;
  padding-right: 10px;
}

.el-tag.tagActive {
  background-color: #1890ff;
  color: #fff;
}
.el-tag >>> .el-icon-close {
  font-size: 20px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  color: #f56c6c;
}
.el-tag >>> .el-icon-close:hover {
  background-color: #f56c6c;
  color: #fff;
}
.perInfo {
  margin-bottom: 60px;
}
</style>